<!doctype html>
<html lang="cn">
<head>
  <title>用户角色选择器</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="/process-editor/editor-app/libs/bootstrap_3.1.1/css/bootstrap.css">
  <link rel="stylesheet" href="/process-editor/editor-app/libs/bootstrap_3.1.1/css/bootstrap-theme.css">

  <script src="/process-editor/editor-app/app-cfg.js?v=1"></script>
  <script src="/process-editor/editor-app/libs/jquery_1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="/process-editor/editor-app/libs/bootstrap_3.1.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/process-editor/editor-app/editor-utils.js"></script>

  <style>
    #selectorTable {
      height: 300px;
      margin-top: 8px;
    }

    #selectorForm > div {
      padding-left: 0;
    }

    #selectorPage .pagination {
      margin: 0 0;
    }

    #selectorPage a.page-item-disable {
      cursor: not-allowed;
    }

    #selectorPage a.page-item-enable {
      cursor: pointer;
    }
  </style>

  <script type="text/javascript">
    $(function () {
      const height = $(window).height() - 80;
      $('#selectorTable').height(height);
      // 初始化选择内容
      window.Ext = {
        basePath: ACTIVITI.CONFIG.contextRoot,
        param: {
          type: EDITOR.UTIL.getParameterByName('type'), // 选择的内容
        },
        rtnData: {
          assignCode: '',
          assignName: '',
        },
        dataSource: [],
        pageInfo: {
          size: 50,
          current: 1,
          total: 0,
        },
      };
      queryList();
    });

    function queryList() {
      const param = {
        ...Ext.pageInfo,
        queryObject: {
          type: Ext.param.type,
          assignName: $('#selectorForm input[name="assignName"]').val(),
        },
      };
      $.ajax({
        url: Ext.basePath + '/flow/model/query/assign', // 指定JSON数据的URL
        contentType: "application/json",
        dataType: 'json', // 指定数据类型为JSON
        type: 'POST',
        data: JSON.stringify(param),
        success: function(data) {
          renderList(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          // 请求失败后的回调函数
          console.error('Error fetching data: ', textStatus, errorThrown);
        }
      });
    }

    function renderList(data) {
      $('#selectorTable table>tbody').empty();
      if (data && data.records.length > 0) {
        Ext.dataSource = data.records;
        Ext.dataSource.forEach((it, idx) => {
          $('#selectorTable table>tbody').append(`
           <tr data-idx="${idx}">
            <td>
              <input type="radio" name="assign" />
            </td>
            <td>${idx + 1}</td>
            <td>${it.assignCode}</td>
            <td>${it.assignName}</td>
            <td>${it.assignDesc}</td>
          </tr>
        `);
        });
        const pages = Math.ceil(data.total / Ext.pageInfo.size);
        const start = Math.floor(Ext.pageInfo.current / 5) + 1;
        const end = Math.min(pages, start + 5);
        const paginationEl = $('#selectorPage ul.pagination');
        paginationEl.empty();
        const clsStart = Ext.pageInfo.current > 1? "page-item-enable" : "page-item-disable";
        paginationEl.append(`<li><a class="${clsStart} prev" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>`);
        for (let i = start; i <= end; i++) {
          paginationEl.append(`<li><a class="page-item-enable item">${i}</a></li>`);
        }
        const clsEnd = Ext.pageInfo.current < pages? "page-item-enable" : "page-item-disable";
        paginationEl.append(`<li><a class="${clsEnd} next" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>`);
        // 绑定事件
        if (Ext.pageInfo.current > 1) {
          $('#selectorPage a.prev').click(function () {
            Ext.pageInfo.current = Ext.pageInfo.current - 1;
            queryList();
          });
        }
        if (Ext.pageInfo.current < pages) {
          $('#selectorPage a.next').click(function () {
            Ext.pageInfo.current = Ext.pageInfo.current + 1;
            queryList();
          });
        }
        $('#selectorPage a.item').click(function () {
          let num = $(this).html();
          Ext.pageInfo.current = Number(num);
          queryList();
        });
        $('#selectorTable table>tbody>tr').click(function () {
          $('#selectorTable table>tbody input[type="radio"]').prop('checked', false);
          $(this).find('input').prop("checked", true);
          let idx = $(this).data('idx')
          Ext.rtnData = Ext.dataSource[idx];
        });
      }
    }
  </script>
</head>

<body class="container-fluid">
  <div id="selectorForm" class="row">
    <div class="col-md-4">
      <div class="input-group">
        <input type="text" class="form-control" name="assignName" placeholder="名称/编码" value=""/>
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">搜索</button>
        </span>
      </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
  </div><!-- /.row -->
  <div id="selectorTable" class="row">
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>序号</th>
          <th>编码</th>
          <th>名称</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <div id="selectorPage" class="row">
    <ul class="pagination"></ul>
  </div>
</body>
</html>
